<template>
  <el-row style="margin-top: 20px" :gutter="10">
    <el-col :span="4" style="text-align:center">
      <el-menu default-active="1-1" class="el-menu-vertical-demo">
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>WG设置</span>
          </template>
            <el-menu-item index="1-1" @click="showWGChild('showWGInfo')">基本信息</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><User /></el-icon>
            <span>成员管理</span>
          </template>
            <el-menu-item index="2-1" @click="showWGChild('showUser')">成员列表</el-menu-item>
            <el-menu-item index="2-2" @click="showWGChild('showApply')">申请一览</el-menu-item>
        </el-sub-menu>
      </el-menu>
      
    </el-col>
    <el-col :span="20">
      <WGInfoCard v-if="appObject.showWGInfo" />
      <WGUser v-if="appObject.showUser" />
      <WGApply v-if="appObject.showApply" />
    </el-col>
  </el-row>
</template>

<script setup>
  import { reactive } from 'vue'

  import WGInfoCard from '../components/WGInfoCard.vue'
  import WGUser from '../components/WGUser.vue'
  import WGApply from '../components/WGApply.vue'

  const appObject = reactive({
    wg: {},
    showWGInfo: true,
    showUser: false,
    showApply: false
  })
  
  const showWGChild = (e) => {
    let wgArray = ['showWGInfo', 'showUser', 'showApply']
    wgArray.forEach(item => {
      if (item === e) {
        appObject[item] = true
      }else {
        appObject[item] = false
      }
    })
  }

  import {
    useRoute
  } from "vue-router"
  // 获取wg的id
  const router = useRoute()
  const wgId = router.params.id

  // 设置wgId
  import wgStore from '../store/wg.js'

  const wStore = wgStore()
  wStore.updateWgId(wgId)
</script>

<style scoped>
</style>
